<template>
    <el-dialog
  :title="titleArray[types]"
  :visible.sync="dialogVisible"
  width="400px"
  >
  <el-form>
      <el-form-item label="部门名称">
          <el-input placeholder="请输入部门名称" v-model="depName"></el-input>
      </el-form-item>
       <el-form-item label="上级部门">
         <el-tree
            :data="data2"
            show-checkbox
            node-key="id"
            :props="defaultProps"
            ref="tree">
        </el-tree>
      </el-form-item>
  </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">关闭</el-button>
    <el-button type="primary" @click="dialogVisible = false">保存</el-button>
  </span>
</el-dialog>
</template>
<script>
export default {
    name: 'depManagement',
    props: {
        types: {
            type: Number, // 1增加部门0部门修改
            default: 1
        },
        showDialog: {
            type: Boolean,
            default: false
        }
    },
    data () {
        return {
            dialogVisible: false,
            titleArray: ['部门修改', '增加部门'],
            depName: '',
            data2: [{
                id: 1,
                label: '一级 1',
                children: [{
                    id: 4,
                    label: '二级 1-1',
                    children: [{
                        id: 9,
                        label: '三级 1-1-1'
                    }, {
                        id: 10,
                        label: '三级 1-1-2'
                    }]
                }]
            }, {
                id: 2,
                label: '一级 2',
                children: [{
                    id: 5,
                    label: '二级 2-1'
                }, {
                    id: 6,
                    label: '二级 2-2'
                }]
            }, {
                id: 3,
                label: '一级 3',
                children: [{
                    id: 7,
                    label: '二级 3-1'
                }, {
                    id: 8,
                    label: '二级 3-2'
                }]
            }],
            defaultProps: {
                children: 'children',
                label: 'label'
            }
        }
    },
    watch: {
        'dialogVisible' (state) {
            if (!state) {
                this.$emit('close')
                this.$refs.tree.setCheckedKeys([])
            }
        },
        'showDialog' (state) {
            if (state) {
                this.dialogVisible = true
            }
        }
    }
}
</script>
<style lang="less">
.dep-management {}
</style>
